Horizontal Auto Layout in Figma is a powerful layout system used to arrange multiple objects from left to right along the horizontal x-axis. It automatically manages the position, spacing, alignment, padding, and resizing of elements whenever the content changes. It is especially useful for navigation bars, buttons, tabs, profile sections, toolbars, chips, tags, action groups, cards, headers, and responsive interface components.
Learn professional Figma design concepts with JustAcademy Figma Training and practice responsive UI design through structured projects. You can also Register for Figma Course Demo to understand the course and learning approach.
Horizontal Auto Layout is an Auto Layout flow in Figma that arranges child objects horizontally from left to right. The elements follow the x-axis, and Figma automatically updates their positions when objects are added, removed, reordered, resized, or when their content changes.
For example, consider a navigation menu containing Home, About, Services, Portfolio, and Contact. Instead of manually positioning every menu item, you can place all items inside a horizontal Auto Layout frame. When a new item is added or the text of an item changes, the remaining items automatically adjust their positions.
Horizontal Auto Layout
|
v
+---------------------------------------------+
| Home | About | Services | Portfolio | Contact |
+---------------------------------------------+
|
v
Elements flow from LEFT to RIGHT
Horizontal Auto Layout reduces manual positioning and makes interfaces responsive and easier to maintain. Instead of calculating the position of every element, you define the relationship between the elements and allow Figma to manage their arrangement.
The most important concept in Horizontal Auto Layout is the x-axis. When the flow is horizontal, the children are positioned from left to right along the x-axis.
X-Axis
---------------------------------------------------->
0 100 200 300 400
[Item 1] [Item 2] [Item 3] [Item 4]
| | | |
+-----------+------------+------------+
Horizontal Flow
If an element is added between Item 2 and Item 3, Figma automatically moves Item 3 and Item 4 instead of requiring manual repositioning.
Horizontal Auto Layout works through a parent-child relationship. The Auto Layout frame acts as the parent, while the objects inside it are the children.
Horizontal Auto Layout Frame
|
+-- Child 1
+-- Child 2
+-- Child 3
+-- Child 4
The parent controls important properties such as flow, gap, padding, alignment, and wrapping. The children can have their own resizing behavior.
| Feature | Regular Frame | Horizontal Auto Layout |
|---|---|---|
| Automatic positioning | No | Yes |
| Horizontal flow | Manual | Automatic |
| Spacing management | Manual | Automatic |
| Content resizing | Limited | Responsive |
| Adding new elements | Requires repositioning | Automatically positioned |
| Reordering | Manual | Automatically updates layout |
| Padding | Manual positioning | Built-in property |
| Responsive components | More difficult | Much easier |
Figma provides multiple Auto Layout flows. Horizontal is best when elements need to flow from left to right, Vertical is best when elements flow from top to bottom, and Grid is useful for structured rows and columns.
| Flow | Direction | Common Use |
|---|---|---|
| Horizontal | Left to right | Navigation, buttons, tabs, toolbars |
| Vertical | Top to bottom | Forms, lists, cards, content sections |
| Grid | Rows and columns | Dashboards, galleries, bento layouts |
You can create Auto Layout around one or more selected objects. Figma then creates an Auto Layout frame around the selected layers. After applying Auto Layout, choose Horizontal as the flow.
Figma officially supports applying Auto Layout to frames, selections, components, component sets, groups, and other layer selections. When layers are selected, Figma creates an Auto Layout frame around them. :contentReference[oaicite:0]{index=0}
You can also create an empty frame first and then enable Auto Layout on it. This approach is useful when planning a component before adding its content.
Create Frame
|
v
Apply Auto Layout
|
v
Select Horizontal Flow
|
v
Set Padding
|
v
Set Gap
|
v
Set Alignment
|
v
Add Child Elements
Horizontal flow determines that the children should be arranged along the x-axis. When an object is added, removed, or reordered, the other objects automatically follow the horizontal flow.
Before:
[Logo] [Search] [Profile]
Add Notification:
[Logo] [Search] [Notification] [Profile]
This behavior is particularly useful for headers, navigation bars, action groups, and horizontal lists. :contentReference[oaicite:1]{index=1}
Padding is the space between the boundary of the Auto Layout parent and its child elements. Padding prevents the content from touching the edges of the frame.
+------------------------------------------------+
| Padding |
| [Item 1] [Item 2] [Item 3] |
| |
+------------------------------------------------+
For example, a button might have 16px left and right padding and 10px top and bottom padding.
You can define horizontal and vertical padding separately. This is useful when the left and right spacing should be different from the top and bottom spacing.
Horizontal Padding = 24px
Vertical Padding = 12px
+--------------------------------------+
| 12px |
| 24px [ Button Label ] 24px |
| 12px |
+--------------------------------------+
Figma also allows individual padding values for top, right, bottom, and left sides.
| Side | Example |
|---|---|
| Top | 12px |
| Right | 24px |
| Bottom | 12px |
| Left | 24px |
This is useful when designing components that require asymmetric spacing.
Gap controls the distance between child objects inside an Auto Layout frame. In a horizontal flow, the normal gap controls the horizontal distance between neighboring objects.
[Home] 16px [About] 16px [Services] 16px [Contact]A consistent gap creates a clean and predictable interface.
A numeric gap lets you specify an exact distance between child elements. For example, setting the gap to 16px creates 16px of space between adjacent children.
| Gap | Typical Usage |
|---|---|
| 4px | Very tight icon groups |
| 8px | Small controls |
| 12px | Compact UI elements |
| 16px | Common navigation and button spacing |
| 24px | Large component spacing |
| 32px | Major layout groups |
Horizontal Auto Layout can use Auto spacing to distribute available space between children. Figma provides distribution options such as Between, Evenly, and Around.
Between places the available space between objects while keeping the outer edges without additional distributed spacing.
|[Logo]----------------[Menu]----------------[Profile]|Evenly distributes spacing equally across the gaps and the edges.
|---[Item]---[Item]---[Item]---|Around distributes spacing around each object, with the edge space being half the internal gap in the standard distribution model.
Figma documents Between, Evenly, and Around as the Auto spacing options for horizontal and vertical flows. :contentReference[oaicite:2]{index=2}
Alignment determines where child elements sit inside the parent Auto Layout frame. The available alignment options depend on the flow and the gap distribution.
With a numeric gap, a horizontal flow can use nine alignment positions such as top-left, top-center, top-right, left, center, right, bottom-left, bottom-center, and bottom-right.
Top Left Top Center Top Right
* * *
Left Center Right
* * *
Bottom Left Bottom Center Bottom Right
* * *
When gap is set to Auto, horizontal flow provides Top, Center, and Bottom alignment options. :contentReference[oaicite:3]{index=3}
Center alignment is frequently used when horizontal items need to remain vertically centered inside a taller parent.
+----------------------------------------+
| |
| [Icon] [Label] [Button] |
| |
+----------------------------------------+
This is especially useful for navigation bars, headers, toolbars, and profile rows.
Hug Contents means the frame adjusts its size according to the size of its children. This is extremely useful for buttons, tags, chips, badges, and compact horizontal components.
Short Text:
+------------------+
| Save |
+------------------+
Long Text:
+--------------------------------------+
| Save Changes and Continue |
+--------------------------------------+
If the text changes, the component can grow instead of requiring manual resizing.
Fill Container allows a child to occupy the available space provided by its parent. It is useful when one child should expand while other elements remain fixed or hug their content.
+------------------------------------------------+
| [Icon] [ Flexible Content ] [CTA]|
+------------------------------------------------+
For example, a search field inside a horizontal header can fill the available space between a logo and an account button.
Fixed sizing keeps an element at a specified dimension. It is useful when an element must maintain a consistent width regardless of surrounding content changes.
[Logo] [Search: Flexible Width] [Button: Fixed Width]Fixed sizing can be combined with Hug Contents and Fill Container to create predictable responsive behavior.
Minimum and maximum dimensions allow you to constrain how far an element can shrink or grow. This is particularly useful for responsive horizontal components.
Minimum Width = 120px
Maximum Width = 320px
120px <= Component Width <= 320px
For example, a search input may grow on a large screen but should not become smaller than a practical minimum width.
One of the major advantages of Horizontal Auto Layout is automatic reordering. When the layer order changes, the visual order follows the new layer order.
Before:
[Home] [About] [Services]
After moving Services:
[Home] [Services] [About]
This eliminates the need to manually reposition each element.
When a new child is added to a horizontal Auto Layout frame, Figma places it according to the Auto Layout structure. The existing elements adjust automatically.
Before:
[Home] [About] [Contact]
Add Services:
After:
[Home] [About] [Services] [Contact]
Figma's horizontal flow automatically handles the x-axis positioning of children. :contentReference[oaicite:4]{index=4}
Removing an element from a horizontal Auto Layout frame causes the remaining elements to close the gap automatically according to the frame's spacing settings.
Before:
[Home] [About] [Services] [Contact]
Remove Services:
After:
[Home] [About] [Contact]
Wrap allows horizontal Auto Layout children to move onto a new row when they no longer fit within the available horizontal space.
+--------------------------------------+
| [Tag 1] [Tag 2] [Tag 3] [Tag 4] |
| [Tag 5] [Tag 6] [Tag 7] |
+--------------------------------------+
Horizontal wrap is useful for tags, filters, chips, categories, and responsive button groups. Figma specifies that horizontal-flow objects fill from left to right and continue on a new row when horizontal space runs out. :contentReference[oaicite:5]{index=5}
Text is one of the most important use cases for Auto Layout because text content can change. A horizontal component should be designed so that text can expand without breaking the surrounding layout.
[Icon] [Short Label]
Changes to:
[Icon] [Longer Label That Requires More Space]
Use Hug Contents for text-driven components such as buttons and chips, and use Fill Container when the text region should consume available space.
A button is one of the best examples of Horizontal Auto Layout. Instead of placing a rectangle behind a text layer manually, create an Auto Layout frame containing the button content.
Button
+--------------------------------+
| [Icon] Get Started |
+--------------------------------+
<-- padding -->
Horizontal Auto Layout is ideal for icon buttons because the icon and label remain aligned when the label changes.
+--------------------------------+
| [Download Icon] Download |
+--------------------------------+
If "Download" changes to "Download Report", the button expands automatically when Hug Contents is used.
Multiple buttons can be placed inside a horizontal Auto Layout frame to create an action group.
+------------------------------------------------+
| [Cancel] [Save Draft] [Publish] |
+------------------------------------------------+
This pattern is useful for forms, dialogs, dashboards, and content-management interfaces.
A navigation bar commonly contains a logo, menu items, search field, and account controls. Horizontal Auto Layout makes these elements easier to manage.
+----------------------------------------------------------------+
| [Logo] [Home] [Products] [Services] [Pricing] [Search] [User]|
+----------------------------------------------------------------+
Nested Auto Layout can be used when different groups require different alignment or spacing behavior.
Tabs are naturally horizontal. Each tab can be an individual component, and all tabs can be placed in a horizontal Auto Layout container.
+------------------------------------------------+
| Overview | Features | Reviews | Specifications |
+------------------------------------------------+
Each tab can use Hug Contents while the parent controls the spacing between them.
Tags and chips are excellent examples of small horizontal Auto Layout components.
[UI Design] [Figma] [Prototyping] [UX Research]Use Hug Contents for each chip and Wrap on the parent container when the tags need to move onto multiple rows.
Breadcrumb navigation can be created with a horizontal Auto Layout frame.
Home / Products / Electronics / SmartphonesEach breadcrumb item can be a child of the horizontal container, while separators can be separate child layers or nested components.
Horizontal Auto Layout is useful for editor toolbars containing icons and actions.
+--------------------------------------------------------+
| [Undo] [Redo] | [Bold] [Italic] [Underline] | [Share] |
+--------------------------------------------------------+
Nested frames can be used for groups of related controls.
A profile row typically contains an avatar followed by user information and an action button.
+------------------------------------------------+
| [Avatar] [Name + Details] [Follow] |
+------------------------------------------------+
The avatar can be fixed, the text container can fill available space, and the button can hug its contents.
Notification rows can combine an icon, message content, timestamp, and action button.
+----------------------------------------------------------------+
| [Icon] [Notification Message.................] [2m ago] [View] |
+----------------------------------------------------------------+
A nested vertical Auto Layout frame can be used for multiple lines of notification text inside the horizontal parent.
Horizontal Auto Layout is useful for product rows in shopping applications.
+----------------------------------------------------------------+
| [Image] [Product Name + Details] [Price] [Quantity] [Add Cart] |
+----------------------------------------------------------------+
This structure can remain flexible when the product name becomes longer.
A pricing card can contain a horizontal action group with multiple buttons.
+--------------------------------------+
| Basic Plan |
| $19 / month |
| |
| [Learn More] [Choose Plan] |
+--------------------------------------+
Like, comment, share, bookmark, and other actions can be arranged using Horizontal Auto Layout.
[Like] [Comment] [Share] [Save]Each action can be built as a reusable component using an icon and label.
Footer navigation can use horizontal Auto Layout for link groups, social icons, and utility actions.
+----------------------------------------------------------------+
| Company | Resources | Support | Legal [Social] |
+----------------------------------------------------------------+
A responsive website header is one of the most common professional applications of Horizontal Auto Layout.
+-------------------------------------------------------------------+
| [Logo] [Navigation Links] [Search] [Login] [CTA] |
+-------------------------------------------------------------------+
Nested horizontal and vertical Auto Layout frames can make each group independently responsive.
Nested Auto Layout means placing one Auto Layout frame inside another Auto Layout frame. This allows different parts of an interface to use different flows.
Main Horizontal Frame
|
+-- Logo
|
+-- Navigation Horizontal Frame
| |
| +-- Home
| +-- About
| +-- Services
|
+-- Actions Horizontal Frame
|
+-- Search
+-- Login
+-- Sign Up
Nested Auto Layout is one of the most powerful techniques for building complex responsive interfaces. Figma supports combining horizontal, vertical, and grid flows through nested frames. :contentReference[oaicite:6]{index=6}
A horizontal parent can contain a vertical child. This is common when an avatar and a block of user information need to sit side by side.
Horizontal Parent
|
+-- Avatar
|
+-- Vertical Information
|
+-- User Name
+-- Job Title
+-- Description
Components can use Auto Layout to create reusable interface elements. Since components are frames, Auto Layout can be applied to them.
For example, create one button component using Horizontal Auto Layout and reuse it throughout the application.
Button Component
|
+-- Icon
+-- Label
|
+-- Horizontal Auto Layout
|
+-- Padding
+-- Gap
+-- Alignment
+-- Hug Contents
Figma notes that Auto Layout can be added to components, while certain layer editing capabilities differ between main components and instances. :contentReference[oaicite:7]{index=7}
Horizontal Auto Layout works especially well with component variants. A button component can have variants such as Primary, Secondary, Disabled, Icon Only, and Loading.
| Variant | Possible Content |
|---|---|
| Primary | Icon + Label |
| Secondary | Icon + Label |
| Icon Only | Icon |
| Loading | Spinner + Label |
| Disabled | Icon + Label |
Horizontal Auto Layout helps create designs that respond to changes in screen size and content. However, responsiveness depends on combining the correct resizing behaviors.
Desktop
[Logo] [Navigation................] [Search] [Account]
Tablet
[Logo] [Navigation.......] [Search] [Account]
Mobile
[Logo] [Menu] [Account]
Different responsive states may require components, variants, wrapping, visibility changes, or breakpoint-specific designs in addition to Auto Layout.
A professional horizontal layout often combines Hug Contents, Fill Container, and Fixed sizing.
+----------------------------------------------------------+
| [Logo Fixed] [Search Fill Container] [Profile Hug] |
+----------------------------------------------------------+
This combination allows the center area to absorb available space while the side elements retain their intended dimensions.
A search bar can contain an icon, input area, clear button, and search action.
+----------------------------------------------------+
| [Search Icon] [Search products.............] [X] |
+----------------------------------------------------+
The input area can use Fill Container while the icons remain fixed or hug their contents.
Form actions can be placed inside a horizontal Auto Layout frame.
+----------------------------------------------+
| [Cancel] [Save Changes]|
+----------------------------------------------+
Using Auto spacing can push the buttons to opposite sides of the parent.
Dashboard headers commonly contain a title on one side and actions on the other.
+----------------------------------------------------------------+
| Dashboard Overview [Export] [Add User] |
+----------------------------------------------------------------+
The title section can fill the container while the action group hugs its contents.
A common design requirement is placing one item at the left edge and another at the right edge. Auto spacing can distribute available space between them.
+------------------------------------------------+
| [Title] [Action Button] |
+------------------------------------------------+
This technique is especially useful for headers, cards, list rows, and navigation bars.
Designers who understand CSS Flexbox can think of Horizontal Auto Layout as a visual design equivalent for many one-dimensional layout situations.
| Figma | Conceptual CSS Equivalent |
|---|---|
| Horizontal Flow | flex-direction: row |
| Vertical Flow | flex-direction: column |
| Gap | gap |
| Auto Spacing Between | space-between |
| Auto Spacing Evenly | space-evenly |
| Auto Spacing Around | space-around |
| Wrap | flex-wrap: wrap |
This mental model is useful when designing developer-friendly interfaces.
Auto Layout and Constraints solve related but different layout problems. Auto Layout controls the relationship and flow of child elements inside a container, while constraints can control how an element behaves relative to a parent or resizing context.
Use Auto Layout when the content should flow and resize automatically. Use constraints when specific positional relationships are required within a frame.
Some elements may need to visually float outside the normal Auto Layout flow. Figma provides ways to position certain layers independently when required.
This can be useful for notification badges, floating icons, decorative elements, or overlays.
Auto Layout Parent
|
+-- Main Content
+-- Action
|
+-- Floating Badge
^
|
Independent Position
A badge can contain an icon and a label and use Hug Contents.
+----------------------+
| [●] New |
+----------------------+
When the label changes, the badge expands automatically.
Status indicators can combine a colored indicator, status label, and optional count.
[●] Active (24)Each part can be organized using nested Auto Layout for consistent alignment.
Pagination controls are another common horizontal pattern.
[Previous] [1] [2] [3] [4] [5] [Next]Each button can be a reusable component, while the pagination container uses Horizontal Auto Layout.
A checkout or onboarding stepper can be arranged horizontally.
[1 Account] ---- [2 Address] ---- [3 Payment] ---- [4 Complete]Nested elements can be used to combine icons, labels, and connecting lines.
Star ratings can be created with a horizontal Auto Layout frame.
[★] [★] [★] [★] [☆]Each star can be an individual component, making the control easy to update.
A language selector can contain a flag, language name, and dropdown icon.
+--------------------------------+
| [Flag] English [▼] |
+--------------------------------+
Hug Contents allows the selector to adapt to languages with different text lengths.
An e-commerce product action section can use multiple horizontal Auto Layout groups.
[−] [ 2 ] [+] [Add to Cart]The quantity control can be its own Auto Layout component nested inside a larger horizontal action frame.
Chat interfaces can use horizontal Auto Layout for avatar and message content.
+------------------------------------------------+
| [Avatar] [Message text......................] |
+------------------------------------------------+
The message container can use vertical Auto Layout internally for multiple message lines or metadata.
Team member cards can contain avatar, information, and actions.
[Avatar] [Name + Role] [View]The information section can Fill Container while the action remains Hug Contents.
Comments often contain action controls such as Reply, Like, Share, and More.
[Reply] [Like 24] [Share] [More]Using Horizontal Auto Layout keeps these actions evenly and consistently spaced.
Mobile navigation frequently uses horizontally arranged icons or controls.
+------------------------------------------+
| [Home] [Search] [Add] [Messages] [Profile]|
+------------------------------------------+
Horizontal Auto Layout keeps the navigation items organized and easier to maintain.
Desktop navigation usually combines several nested horizontal groups.
+----------------------------------------------------------------+
| [Logo] [Products] [Solutions] [Resources] [Pricing] [Login] |
+----------------------------------------------------------------+
For complex navigation, create separate nested frames for the logo, navigation links, and action controls.
A horizontal card can contain an image, information area, and action.
+----------------------------------------------------------------+
| [Image] [Title + Description................] [Action Button] |
+----------------------------------------------------------------+
The image can be fixed, the information area can fill the available space, and the action button can hug its contents.
Long text is one of the most important things to test in an Auto Layout component. A component that works with short labels may break when the text becomes longer.
Short:
[Icon] Save
Long:
[Icon] Save Changes and Continue to Dashboard
Use appropriate resizing properties and test different content lengths before considering a component complete. Figma also recommends testing content changes because fixed text boxes can cause clipping or overlap in responsive Auto Layout designs. :contentReference[oaicite:8]{index=8}
| Test | Expected Result |
|---|---|
| Short label | Component remains visually balanced |
| Long label | Component expands or wraps correctly |
| Empty label | No unexpected collapse |
| Long username | No overlap with action |
| Long navigation item | Layout remains usable |
| Small container | Elements respond appropriately |
Manually positioning elements defeats the purpose of Auto Layout.
Fixed widths can prevent components from adapting to content.
Always test longer labels and real content.
Inconsistent spacing can make the interface look unprofessional.
Elements with different heights can appear misaligned when the wrong alignment is selected.
Trying to manage a complex interface with one giant frame can make the design difficult to maintain.
Overusing fixed widths and heights can reduce responsiveness.
Identify Content
|
v
Group Related Elements
|
v
Apply Auto Layout
|
v
Choose Horizontal Flow
|
v
Set Padding
|
v
Set Gap
|
v
Set Alignment
|
v
Configure Resizing
|
v
Nest Components if Required
|
v
Test Short/Long Content
|
v
Create Component
|
v
Reuse Across Screens
Create a reusable button using Horizontal Auto Layout.
+--------------------------------------+
| [Arrow] Start Free Trial |
+--------------------------------------+
Create a desktop navigation header using nested horizontal Auto Layout.
Main Header
|
+-- Logo
|
+-- Navigation
| +-- Home
| +-- Products
| +-- Pricing
| +-- About
|
+-- Actions
+-- Search
+-- Login
+-- Sign Up
Set the main header to Horizontal Auto Layout and use nested horizontal frames for Navigation and Actions.
Create a reusable tab component with Active and Inactive variants.
[ Overview ] [ Features ] [ Reviews ] [ FAQ ]Create a collection of filter chips that wraps automatically.
+------------------------------------------+
| [All] [Popular] [New] [Design] [Figma] |
| [UI] [UX] [Prototyping] [Research] |
+------------------------------------------+
Create a profile header with avatar, user information, and an action button.
+-----------------------------------------------------+
| [Avatar] [Name] [Role] [Follow] |
+-----------------------------------------------------+
Use a horizontal parent frame and a vertical nested frame for Name and Role.
Create a responsive product list row for an e-commerce interface.
+----------------------------------------------------------------+
| [Image] [Product Name + Description] [₹ Price] [Qty] [Add Cart]|
+----------------------------------------------------------------+
Recommended structure:
Create a dashboard header using Auto spacing.
+----------------------------------------------------------------+
| Dashboard [Export] [Add Record] |
+----------------------------------------------------------------+
The parent can use Horizontal Auto Layout with Auto spacing so the title remains on the left and the actions move toward the right.
When a horizontal Auto Layout does not behave as expected, inspect the parent frame first and then inspect each child.
Problem
|
+-- Check Flow
|
+-- Check Padding
|
+-- Check Gap
|
+-- Check Alignment
|
+-- Check Width
|
+-- Check Height
|
+-- Check Hug/Fill/Fixed
|
+-- Check Min/Max
|
+-- Check Nested Frames
|
+-- Test Long Content
| Property | Purpose |
|---|---|
| Horizontal Flow | Arranges children left to right |
| Padding | Controls space around children |
| Gap | Controls space between children |
| Auto Spacing | Distributes available space |
| Alignment | Positions children within parent |
| Hug Contents | Sizes frame according to content |
| Fill Container | Expands child into available space |
| Fixed | Maintains a fixed dimension |
| Wrap | Moves children to new rows when needed |
| Min Width | Prevents excessive shrinking |
| Max Width | Prevents excessive expansion |
| Nested Auto Layout | Creates complex responsive structures |
| Action | Shortcut |
|---|---|
| Add Auto Layout | Shift + A |
| Remove Auto Layout | Option/Alt + Shift + A |
| Suggest Auto Layout on Mac | Control + Shift + A |
| Suggest Auto Layout on Windows | Control + Alt + Shift + A |
| Switch Auto Spacing | X from alignment box |
| Set alignment | Arrow Keys |
| Set edge alignment | W / A / S / D |
Figma's current Auto Layout documentation lists Shift + A for adding Auto Layout and provides additional shortcuts for suggesting, removing, alignment, padding, and resizing operations. :contentReference[oaicite:9]{index=9}
Horizontal Auto Layout is a layout flow that automatically arranges child objects from left to right along the x-axis.
Shift + A adds Auto Layout to a selected frame or selection of layers.
It automatically manages positioning and spacing when content changes, making designs easier to maintain and more responsive.
Horizontal flows along the x-axis from left to right, while Vertical flows along the y-axis from top to bottom.
Padding is the space between the boundary of the Auto Layout parent and its child objects.
Gap is the spacing or distribution between child objects.
Hug Contents makes the frame size itself according to its content.
Fill Container makes a child expand to use available space inside its parent.
Fixed sizing maintains a specified width or height.
Wrap allows horizontal children to move to a new row when they no longer fit within the available width.
Nested Auto Layout allows different sections of a complex interface to have independent layout rules.
Apply Horizontal Auto Layout to the button content, add padding, use Hug Contents, and configure the icon and label spacing.
Use Auto spacing when available space needs to be distributed dynamically between child elements.
Yes. Components are frames, so Auto Layout can be applied to them.
Long content can change component dimensions and expose clipping, overlap, or unexpected wrapping problems.
Question: You have a header with a logo on the left, search box in the center, and profile button on the right. How would you build it?
Answer: Create a horizontal Auto Layout parent. Place the logo, search container, and profile action inside it. Keep the logo fixed, make the search area Fill Container, and keep the profile action Hug Contents. Use appropriate padding and Auto spacing or alignment depending on the desired design.
Horizontal Auto Layout
|
+-- Flow = Horizontal
| |
| +-- Left to Right
|
+-- Padding
|
+-- Gap
|
+-- Alignment
|
+-- Resizing
| |
| +-- Hug
| +-- Fill
| +-- Fixed
|
+-- Wrap
|
+-- Min/Max
|
+-- Nested Auto Layout
|
+-- Components
|
+-- Responsive Design
Horizontal Auto Layout is one of the most important Figma skills for creating professional, responsive, and maintainable user interfaces. It allows designers to arrange elements from left to right while automatically managing spacing, padding, alignment, and resizing. Instead of manually moving objects whenever content changes, designers can create relationships between elements and let Figma manage the layout.
Horizontal Auto Layout is especially valuable for navigation bars, buttons, tabs, chips, toolbars, profile rows, product layouts, dashboard headers, responsive cards, mobile navigation, and reusable components. When combined with Hug Contents, Fill Container, Fixed sizing, Wrap, nested Auto Layout, components, and variants, it becomes a powerful system for designing scalable interfaces.
For structured learning and practical Figma projects, explore JustAcademy Figma Training. You can also Register for Figma Course Demo to get started with professional Figma learning.
